<template>
  <div class="order-item  shadow-xl  transition ease-in-out  hover:scale-105 hover:-translate-x-1">
    <div class="order-item-inner flex flex-row" :style="getBorderStyle()">
      <img class="jiantou" :src="require(`@/assets/jiantou${index + 1>=6?6:index + 1}.png`)"/>
      <div class="text-box3 text-box ml-10 ">
        <div><i class="iconfont icon-bianma"/>
          <span>{{ $t('common.materials') }}</span>
        </div>
        <span class="font-bold" :style="`color: ${colors[props.index % colors.length]}`">{{ item.materialCode }}
          <span style="margin: 0 10px">|</span>{{ item.materialName }}</span>
      </div>
      <div class="right">
        <div class="text-box w-full h-1/2 pt-3">
          <i class="iconfont icon-tongjifenxi2" />
          <span>{{ $t('common.inTotal') }}</span>
          <span class="font-bold pl-2" :style="`color: ${colors[props.index % colors.length]}`">{{ item.qty }}</span>
          <span class="font-bold pl-2" :style="`color: ${colors[props.index % colors.length]}`">{{item.unit}}</span>
        </div>
        <div class="text-box w-full h-1/2 pb-3">
          <i class="iconfont icon-ico-timepoint"/>
          <span>{{ $t('common.storageLocation') }}</span>
          <span class="font-bold pl-2"
                :style="`color: ${colors[props.index % colors.length]}`">{{ item.locationCode }}</span>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { defineProps } from 'vue'
import moment from 'moment/moment'

const props = defineProps({
  item: { type: Object, required: true },
  index: {
    type: Number,
    default: 0
  },
})

const colors = ['#d93e3e', '#4066d1', '#c89d1e', '#674798', '#2c7955', '#674798FF']
// 根据 index 返回不同的边框颜色
const getBorderStyle = () => {
  return {
    border: `2px solid ${colors[props.index % colors.length]}` // 确保索引在颜色数组范围内
  }
}

</script>


<style scoped lang="scss">
.right {
  flex: 1;
}

.order-item {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  border-radius: 50px;
  justify-content: space-evenly;
  align-items: center;
  font-size: 13px;
  margin: 15px 3px;
  border: 1px solid #ccc;
  padding: 3px;

  .order-item-inner {
    width: 100%;
    height: 50px;
    border-radius: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .text-box3 {
      width: 55%;
      text-align: left;
    }

    .text-box2 {
      width: 20%;
    }
  }

  .iconfont {
    margin-right: 5px;
    font-size: 18px;
  }

  .jiantou {
    position: absolute;
    width: 30px;
    height: 20px;
    top: -3px;
    left: 5px;
  }
}

</style>
